import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";
import store from "../../redux/store";
import { bySearchAction } from "../../redux/actions/search";
// import axios from "axios";
export default class Search extends Component {
  state = {};
  search = () => {
    const {
      keyWordElement: { value },
    } = this;
    console.log(value.trim());
    //发axios请求，获取搜索的结果
    const searchedData = value.trim();
    store.dispatch(bySearchAction(searchedData));
    PubSub.publish("open", true);
  };
  render() {
    return (
      <div className="all">
        <div className="container">
          <div className="container_content">
            <h3 className="title">NPM Package分析工具</h3>
            <div className="input_container">
              <input
                className="inputbox"
                type="text"
                ref={(node) => {
                  this.keyWordElement = node;
                }}
                placeholder="请输入包名"
              />
              <button className="buttonbox" onClick={this.search}>
                搜索
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
